<!-- 通过以下方法使用
 <wEditor v-model="form.Content"/>
 
 可选参数，参考props属性
 -->
<template lang="html">
	<div class="editor">
		<div v-show="!this.readOnly" ref="toolbar" class="toolbar">
		</div>
		<div ref="editor" class="text" :style="{height:textHeight}" v-loading="loading">
		</div>
	</div>
</template>

<script>
	import {
		UploadPic
	} from '@/api/hmmm/uploadPic.js'	

	import E from 'wangeditor'
	export default {
		name: 'wEditor',
		data() {
			return {
				editor: null,
				info_: null,
				//图片上传提醒
				loading:false,
				//是否完成内容初始化
				initFinish:false, 
			}
		},
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			//value是特殊字符，与父组件的v-model互相呼应，并自带emit对外input
			value: {
				type: String,
				default: '',
				required: true
			},
			//选填，传入是否只读
			readOnly: {
				type: Boolean,
				default: false
			},			
			//选填，图片大小，单位为M，1M = 1024kb
			uploadImgMaxSize: {
				type: Number,
				default: 1,
			},
			//选填，最多一次上传的图片数量
			uploadImgMaxLength: {
				type: Number,
				default: 6,
			},
			//选填，默认文本框高度
			textHeight:{
				type:String,
				default:'300px'
			}
		},
		watch: {
			//监听父组件v-model传递进来的value，因为数据异步加载，一般子组件渲染好了，数据才后到，所以要监听
			//初始化一次值后，就不需要再覆盖，否则会影响输入，导致光标突然跳到尾巴
			value: function(value) {
				if(!this.initFinish){
					if (value !== this.editor.txt.html()) {
						this.editor.txt.html(this.value)
						this.initFinish = true
					}
				}				
			},
		},
		mounted() {
			this.InitEditor()
			this.editor.txt.html(this.value)
		},
		methods: {
			InitEditor() {
				this.editor = new E(this.$refs.toolbar, this.$refs.editor)
				let config = this.editor.customConfig
				config.uploadImgShowBase64 = false // base 64 存储图片				
				config.uploadImgMaxSize = this.uploadImgMaxSize * 1024 * 1024 // 限制图片大小
				config.uploadImgMaxLength = this.uploadImgMaxLength // 限制一次最多上传数量
				//自定义上传代码
				config.customUploadImg = (files, insert) => {
					//files 是 input 中选中的多个文件列表
					for (let file of files) {
						this.loading=true
					    let formData = new FormData()
					    formData.append('img', file)//构造上传对象，因为每次只传1个，所以名字随便起
					    UploadPic(formData) //注意这里不要有{}，会被强转为对象
					    	.then(res => {
					    		insert(res.url)//将图片插入到编辑器中
								this.loading=false
					    	}).catch(err => {
								this.loading=false
							})
					}					
				}
				
				//当有错误时的提示
				config.customAlert = (info) => {					
					this.$message.warning(info)
				}

				// 配置菜单
				config.menus = [
					'head', // 标题
					'bold', // 粗体
					'fontSize', // 字号
					'fontName', // 字体
					'italic', // 斜体
					'underline', // 下划线
					'strikeThrough', // 删除线
					'foreColor', // 文字颜色
					'backColor', // 背景颜色
					'link', // 插入链接
					'list', // 列表
					'justify', // 对齐方式
					'quote', // 引用
					'emoticon', // 表情
					'image', // 插入图片
					'table', // 表格
					'video', // 插入视频
					'code', // 插入代码
					'undo', // 撤销
					'redo', // 重复
					'fullscreen' // 全屏
				]
				// 内容变化时的事件
				
				config.onchange = (html) => {
					this.info_ = html // 绑定当前逐渐地值
					this.$emit('change', this.info_) // 将内容同步到父组件中
				}
				// 创建富文本编辑器
				this.editor.create()
				//只读控制
				this.editor.$textElem.attr('contenteditable', !this.readOnly)
			}
		}
	}
</script>

<style lang="css">
	.editor {
		width: 100%;
		margin: 0 auto;
		position: relative;
		z-index: 0;
	}

	.toolbar {
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		border-left: 1px solid #DCDFE6;
		border-right: 1px solid #DCDFE6;
		border-top: 1px solid #DCDFE6;
	}

	.text {
		border: 1px solid #DCDFE6;
		border-radius: 4px;
	}
	/* 隐藏右边滚动条，官方的有缺陷 */
	.w-e-text{
		overflow-y: auto;
	}
</style>
